<template>
	<div>
		<!-- 排序和筛选 -->
		<div class="pxsx">
			<div :class="{cur: st == 0}" @click="changeSort(0)">综合</div>
			<div :class="{cur: st == 8}" @click="changeSort(8)">销量</div>
			<div class="jg" :class="{cur: st == 9 || st == 10, sjx1: st == 10, sjx2: st == 9}" @click="changeSortJG()">
				价格
			</div>
			<div @click="showDrawer=true; menuVisible=false">筛选</div>
		</div>
		
		<!-- 抽屉筛选器，右边的弹出层 -->
		<van-popup :show="showDrawer" position="right" custom-style="height: 100%; width: 90%;"
			@close="closeDrawerHandler()">
				<!-- 抽屉内部是一个自定义组件 -->
				<!-- 要把所有filters过滤器对象，而不是当前打开的都传给这个组件 -->
				<drawerInner v-if="showDrawer" :filters="filters" :cfArr="cfArr" :cfPrice="cfPrice" :safeHeight="safeHeight" @closeDrawer="closeDrawerHandler()" @ok="okDrawerHandler($event)"/>
		</van-popup>
		<!-- 横向筛选条 -->
		<view class="scroll-bar">
			<scroll-view scroll-x="true">
				<view class="tab_unit">
					<!-- 循环所有的筛选项 -->
					<view class="filter_tab"
						:class="{haveChoose: isHaveChoose(item), current: nowFilterTabIndex == index}"
						v-for="(item, index) in filters" :key="index" @click="tabFilterTabHandler(index)">
						{{showTabWord(item)}}
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 菜单，固定定位的布局 -->
		<view class="menu" v-show="menuVisible">
			<view class="menu-inner">
				<!-- 菜单内部。options表示所有选项。 -->
				<menu-inner v-if="menuVisible" :nowFilterChinese="filters[nowFilterTabIndex].fieldNameDesc"
					:options="filters[nowFilterTabIndex].values" :cfArr="cfArr" :cfPrice="cfPrice"
					@ok="menuInnerOKHandler($event)" @cancel="menuInnerCancelHandler()"></menu-inner>
			</view>
		</view>


		<!-- 无穷滚动 -->
		<scroll-view class="scroll-view-box" scroll-y="true" :style="{height: (safeHeight - 200) + 'px'}"
			lower-threshold="170" @scrolltolower="toLowerHandler()">
			<!-- v-for产品列表 -->
			<view class="product-item" v-for="item in goods" :key="item.SKU" @click="clickItemHandler(item.SKU)">
				<!-- 左边是图片 -->
				<view class="pic">
					<image :src="`http://www.zkt-it.com:5050/pic/product/${item.thumbnail}?format=150w_150h_1e_0l`"
						mode=""></image>
				</view>
				<!-- 右边是文字 -->
				<view class="word">
					<view class=pName>
						{{item.pName}}
					</view>
					<view class="price">
						<span class="rmb">￥</span>{{item.price}}
					</view>
				</view>
			</view>
		</scroll-view>
	</div>
</template>

<script>
	// 当前页，放在这里没毛病，因为template不用它，
	var page = 1;
	// 节流锁
	var lock = true;
	
	// 引入组件
	import menuInner from './menu-inner.vue';
	import drawerInner from './drawer-inner.vue';

	export default {
		// 自定义组件
		components: {
			menuInner,
			drawerInner
		},
		// 当页面加载完毕之后
		onLoad(params) {
			// 把用户搜索的，设置为productName
			this.productName = params.keyword || '空调';

			// 拉取数据
			this.loadData();
			// 拉取过滤器数据
			this.loadFilters();
			// 得到安全高度
			wx.getSystemInfo({
				success: data => {
					// 设置safeHeight为安全盖度
					this.safeHeight = data.safeArea.height;
				}
			});
		},
		data() {
			return {
				safeHeight: 0,
				// 产品
				productName: '',
				// 产品数组（来自服务器）
				goods: [],
				// 所有过滤器（来自服务器）
				filters: [],
				// 用户当前点击的filter-tab的下标
				nowFilterTabIndex: -1,
				// 菜单是否显示
				menuVisible: false,
				// 当前Ajax要发出时的特征值。
				cfArr: ['10278', '10415', '10017', '269323', '268016', '268902', '260032', '615804'],
				// 虽然价格也是cf，但是它只能有一个，所以特殊，我们单独写
				cfPrice: '2000_3000',
				// 是否显示抽屉
				showDrawer: false,
				// 排序综合排序0 销量排序8 价格升序9 价格降序10
				st: 0
			}
		},
		methods: {
			loadData() {
				// loading菊花图
				wx.showLoading();

				// Ajax请求
				wx.request({
					url: 'http://www.zkt-it.com:5050/product-search?&page=' + page + '&keyword=' + this
						.productName + '&cf=' + this.cfArr.join(',') + ',' + this.cfPrice + '&st=' + this.st,
					success: data => {
						this.goods = [...this.goods, ...data.data.goods];
						// 开节流锁
						lock = true;
						// 关闭菊花图
						wx.hideLoading();
					}
				});
			},
			// 滚动到底部，加载更多
			toLowerHandler() {
				// 函数节流
				if (lock) {
					lock = false;
					page++;
					this.loadData();
				}
			},
			// 加载过滤器
			loadFilters() {
				// 发出Ajax请求,看看当前产品有什么筛选器
				wx.request({
					url: 'http://www.zkt-it.com:5050/filter-what?thing=' + this.productName,
					success: data => {
						console.log(data.data.filters);
						this.filters = data.data.filters;
					}
				});
			},
			// 用户点击fitler-tab时做的事情
			tabFilterTabHandler(index) {
				// 判断是展开还是关闭
				// 如果点击的是同一个,那么关闭,否则打开
				if (index == this.nowFilterTabIndex) {
					this.menuVisible = false;
					this.nowFilterTabIndex = -1;
				} else {
					this.nowFilterTabIndex = index;
					this.menuVisible = true;
				}
			},
			// 当用户点击菜单的确定按钮，做的事情
			// 子组件$emit('ok')触发的
			menuInnerOKHandler($event) {
				// 菜单关闭
				this.menuVisible = false;
				// 特征值等于传出来的特征值
				this.cfArr = $event.nowChoosedArr;
				this.cfPrice = $event.nowChoosedPrice;
				// 页码归1
				page = 1;
				// 数组归空
				this.goods = [];
				this.nowFilterTabIndex = -1;
				// 拉取
				this.loadData();
			},
			// 当子菜单点击取消的时候做的事情
			menuInnerCancelHandler() {
				// 什么都不干，就单纯关闭菜单
				this.menuVisible = false;
				// 让nowFilterTabIndex变回-1
				this.nowFilterTabIndex = -1;
			},
			// tab中显示什么
			showTabWord(item) {
				if (item.fieldNameDesc != '价格') {
					let count = 0;
					let arr = [];
					for (let i = 0; i < item.values.length; i++) {
						if (this.cfArr.includes(item.values[i].value)) {
							count++;
							arr.push(item.values[i].valueDesc);
						}
					}
					if (count == 0) {
						return item.fieldNameDesc;
					} else if (count == 1) {
						return item.fieldNameDesc + '（' + arr[0] + ')';
					} else {
						return item.fieldNameDesc + '（' + arr[0] + '等' + count + '个）';
					}
				} else {
					if (this.cfPrice) {
						return '价格(' + this.cfPrice + ')';
					} else {
						return '价格';
					}
				}
			},
			// 决定tab有没有cur类
			isHaveChoose(item) {
				if (item.fieldNameDesc != '价格') {
					let count = 0;
					let arr = [];
					for (let i = 0; i < item.values.length; i++) {
						if (this.cfArr.includes(item.values[i].value)) {
							count++;
							arr.push(item.values[i].valueDesc);
						}
					}
					return count != 0;
				} else {
					return this.cfPrice != '';
				}
			},
			// 点击某个产品了，要去详情页面了
			clickItemHandler(SKU) {
				wx.navigateTo({
					url: '/pages/product-detail/product-detail?SKU=' + SKU
				});
			},
			// 关闭弹出层时做的事情
			closeDrawerHandler() {
				this.showDrawer = false;
			},
			// 点击确定按钮做的事情
			okDrawerHandler(v) {
				this.cfArr = [...v.myCfArr];
				this.cfPrice = v.myCfPrice;
				// 清空所有数据
				page = 1;
				this.goods = [];
				// 拉取
				this.loadData();
				// 关闭抽屉
				this.showDrawer = false;
			},
			// 改变排序
			changeSort(v) {
				// 改变排序值
				this.st = v;
				// 清空
				this.goods = [];
				// 页码归1
				page = 1;
				// 拉取
				this.loadData();
			},
			// 当点击价格排序时
			changeSortJG() {
				// 改变排序值
				if (this.st != 9) {
					this.st = 9;
				} else {
					this.st = 10;
				}
				
				 
				// 清空
				this.goods = [];
				// 页码归1
				page = 1;
				// 拉取
				this.loadData();
			}
		},
	}
</script>

<style scoped>
	.scroll-view-box {}

	.product-item {
		display: flex;
		padding: 10px;
		font-size: 13px;
	}

	.product-item .pic {
		width: 220rpx;
		height: 220rpx;
		margin-right: 10px;
	}

	.product-item .pic image {
		width: 220rpx;
		height: 220rpx;
	}

	.scroll-bar {
		padding: 6px;
		padding-bottom: 0;
	}

	.scroll-bar .tab_unit {
		/* 清除浮动 */
		height: 30px;
		padding: 6px;
		padding-bottom: 0;
		/* 不允许换行 */
		white-space: nowrap;
	}

	.scroll-bar .tab_unit .filter_tab {
		border:1px solid #e7e7e7;
		background-color: #ffffff;
		padding: 2px 10px;
		border-radius: 4px;
		margin-right: 10px;
		font-size: 12px;
		display: inline-block;
		position: relative;
	}

	.scroll-bar .tab_unit .filter_tab.haveChoose {
		border:1px solid #e01222;
		color: black;
		background-color: white;
	}

	.scroll-bar .tab_unit .filter_tab.current {
		background-color: #ffff7f;
	}


	.menu {
		position: absolute;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
		/* 层叠 */
		z-index: 999;
	}

	.menu .menu-inner {
		padding-bottom: 30px;
		width: 100%;
		background-color: #ffffff;
	}

	.price {
		font-size: 16px;
		color: #e01222;
		margin-top: 10px;
	}
	.price .rmb {
		font-size: 14px;
	}
	
	/* 筛选和排序的横轴 */
	.pxsx {
		padding-top: 10px;
		display: flex;
	}
	.pxsx>div {
		flex: 1;
		text-align: center;
		position: relative;
	}
	.pxsx>div.cur {
		color: #e01222;
	}
	.pxsx>div.jg::before{
		content: '';
		position: absolute;
		width: 12px;
		height: 12px;
		right: 10px;
		top: 3px;
		background-size: cover;
	}
	.pxsx>div.jg.sjx1::before {
		background-image: url(/static/sjx1.png);
	}
	.pxsx>div.jg.sjx2::before {
		background-image: url(/static/sjx2.png);
	}
</style>
